{% extends "base.html" %}

{% block content %}
<div class="bg-white rounded-lg shadow-md p-6 mx-auto max-w-7xl">
    <h1 class="text-2xl font-bold text-primary mb-6">学生数据预览</h1>

    <!-- 添加参数显示 -->
    <div class="mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
        <h2 class="text-lg font-semibold mb-2">生成学生成绩数据参数</h2>
        <div class="grid grid-cols-2 gap-4 text-sm">
            <div><span class="text-gray-600">学生人数:</span> {{ num_students }}人</div>
            <div><span class="text-gray-600">出勤权重:</span> {{ attendance_weight * 100 }}%</div>
            <div><span class="text-gray-600">作业权重:</span> {{ homework_weight * 100 }}%</div>
            <div><span class="text-gray-600">期中权重:</span> {{ midterm_weight * 100 }}%</div>
        </div>
    </div>

    <form action="/analyze_data" method="POST" style="margin-bottom: 20px;">
        <button type="submit" class="px-4 py-2 bg-secondary hover:bg-green-600 text-white rounded-lg transition-custom">
            <i class="fa fa-bar-chart mr-1"></i>进行数据分析
        </button>
    </form>
    <div class="overflow-x-auto border border-gray-200 rounded-lg">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-primary text-white">
                <tr>
                    <th class="px-6 py-3 text-left text-sm font-medium uppercase tracking-wider">学生ID</th>
                    <th class="px-6 py-3 text-left text-sm font-medium uppercase tracking-wider">出勤成绩</th>
                    <th class="px-6 py-3 text-left text-sm font-medium uppercase tracking-wider">作业成绩</th>
                    <th class="px-6 py-3 text-left text-sm font-medium uppercase tracking-wider">期中成绩</th>
                    <th class="px-6 py-3 text-left text-sm font-medium uppercase tracking-wider">期末成绩</th>
                    <th class="px-6 py-3 text-left text-sm font-medium uppercase tracking-wider">是否挂科</th>
                    <th class="px-6 py-3 text-left text-sm font-medium uppercase tracking-wider">分数段</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for row in data %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ row.student_id }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ "%.1f"|format(row.attendance) }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ "%.1f"|format(row.homework) }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ "%.1f"|format(row.midterm) }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ "%.1f"|format(row.final_grade) }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <span class="px-2 py-1 rounded-full text-xs font-medium {{ 'bg-red-100 text-red-800' if row.failed else 'bg-green-100 text-green-800' }}">
                            {{ '挂科' if row.failed else '不挂科' }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ row.score_range }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <!-- 分页控件 -->
    <div class="flex justify-center mt-6">
        <nav class="flex items-center space-x-2">
            <a href="/data_preview?page={{ current_page - 1 }}" class="px-4 py-2 rounded {% if current_page == 1 %}opacity-50 cursor-not-allowed{% else %}bg-primary hover:bg-blue-600 text-white{% endif %}">
                上一页
            </a>
            <span class="px-4 py-2 text-gray-700">
                第 {{ current_page }} 页，共 {{ total_pages }} 页
            </span>
            <a href="/data_preview?page={{ current_page + 1 }}" class="px-4 py-2 rounded {% if current_page >= total_pages %}opacity-50 cursor-not-allowed{% else %}bg-primary hover:bg-blue-600 text-white{% endif %}">
                下一页
            </a>
        </nav>
    </div>
</div>
{% endblock %}